<template>
  数字：<input type="text" v-model="num"><br>
  对应的大写字母：{{ strA }}，对应的小写字母：{{ stra }}
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
export default {
    setup () {
        const state = reactive({
            num: 0,
            strA: 'A',
            stra: 'a'
        })

        watch(() => {
            // 计算对应大写字母，大写字母的ASCII码的十进制从65开始 _(:з」∠)_
            // String.fromCharCode(数值)函数将 Unicode 编码的数值转换成一个字符
            state.strA = String.fromCharCode(65 + parseInt(state.num % 26))
            // 计算对应小写字母，小写字母的ASCII码的十进制从97开始
            state.stra = String.fromCharCode(97 + parseInt(state.num % 26))
        })

        return {
            ...toRefs(state)
        }
    }
}
</script>

<style>

</style>